<template>
    <div class="dataTable">
        <paginationTable
            ref="paginationTable1"
            :elTableColumn="elTableColumn"
            :tableData="tableData"
            :pagination="true"
            :total="pager.total"
            :pageNo="pager.pageNo"
            :pageSize="pager.pageSize"
            @handleCurrentChange="handleCurrentChange"
            @handleSizeChange="handleSizeChange"
        />
    </div>
</template>

<script lang="ts">
import {onMounted } from 'vue';
import { searchComment } from 'src/plugins/http/server/article/index';
import paginationTable from '@/components/paginationTable/index.vue';
import userHooks from 'src/hooks/userHooks';

export default {
    'components': {
        paginationTable
    },
    setup() {
        const tableItem = {
            'getDataFn': searchComment,
            'type':'comment'
        };
        const {
            pager,
            tableData,
            getData,
            handleSizeChange,
            handleCurrentChange
        } = userHooks(tableItem);
        // 定义动态表格-格式
        const elTableColumn = [
            // {
            //     'prop': 'detail',
            //     'label': '评论'
            // },
            // {
            //     'prop': 'articleTitle',
            //     'label': '评论的话题'
            // },
            {
                'label': '评论的话题',
                'type':'html',
                'formatter':  (row:any) => `<a style="color:#606266" href="${window.location.origin}/#/articleDetail/${row.articleId}">${row.articleTitle}</a>`
            },
            {
                'label': '是否被禁用',
                'formatter': (row: any) => (row.status === '0' ? '是' : '否')
            },

            {
                'label': '是否匿名',
                'formatter': (row:any) => (row.real === '0'?'是':'否')
            },
            {
                'prop': 'createTime',
                'label': '发表时间'
            }
        ];

        onMounted(() => {
            getData();
        });
        return {
            elTableColumn,
            pager,
            tableData,
            handleSizeChange,
            handleCurrentChange,
            getData
        };
    }
};
</script>
<style lang='less' scoped>
</style>